<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1200px;
            margin: 0 auto;
        }
        .box .header,.footer{
            height: 100px;
            width: 1200px;
            background-color: springgreen;
            font-size: 80px;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        ul,li{
            list-style: none;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        ul > li{
            width: 280px;
            height: 500px;
            border: 1px solid gray;
            margin-top: 10px;
        }
        img{
            width: 280px;
            height: 350px;
        }
        ul>li>p{
            padding: 0 10px;
        }
        .pagination{
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .pagination p{
            margin:0 20px;
            width: 30px;
            height: 30px;
            background-color: springgreen;
            text-align: center;
            line-height: 30px;
            font-weight: 700;
        }
        select{
            width: 50px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">头部</div>
        <div class="pagination">
            <p class="prev">&lt;</p>
            <span class="up">1</span>
            /
            <span class="down">4</span>
            <p class="next">&gt;</p>
            <select>
                <option value="4">4</option>
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="16">16</option>
            </select>
        </div>
        <div class="content">
            <ul>
                <li>
                    <img src="" alt="">
                    <p>2020西太湖国际应跃进</p>
                    <p>城市:常州</p>
                    <p>地址:常州席太平个地方回家看电视</p>
                    <p>价格:23323</p>
                    <p>演出时间:2022</p>
                </li>
            </ul>
        </div>
        <div class="footer">尾部</div>
    </div>
    <script src="./dm_list.js"></script>
    <script>
        //获取要点击的按钮
        var prevBtn = document.querySelector(".prev")
        var nextBtn = document.querySelector(".next")
        var select = document.querySelector("select")
        var up = document.querySelector(".up")
        var down = document.querySelector(".down")
        /* 
            默认显示第一页,默认一页显示4条
                var current = 1;//当前页为第一页
                var pageNum = 4;//默认一页显示4条
                var pageCount = Math.ceil(list.length / pageNum)//对总页数建向上取整
            渲染默认的第一页的数据
                数据再list里面
                    第一页  显示4条     0~3
                    第一页  显示8条     0~7
                    第一页  显示12条    0~11
                    第二页  显示4条     4~7
                    第二页  显示8条     8~15
                    第二页  显示12条    12~23
                    第三页  显示4条     8~11
                    第三页  显示8条     16~23
                    第四页  显示4条     12~15
                    x       y          (x-1)*y~(x*y-1)
        */
        var current = 3;//当前页为第一页
        var pageNum = 4;//默认一页显示4条
        var pageCount = Math.ceil(list.length / pageNum)//对总页数建向上取整

        function render(){
            //当前页
            up.innerHTML = current
            //总页数
            down.innerHTML = pageCount

            //第一页,那么就取出前4条数据,要不要改变原数组
            var arr = list.slice((current-1)*pageNum,(current*pageNum-1+1))
            //渲染数据
            var str = ""
            arr.forEach(function(item){
                str+=`
                    <li>
                        <img src="${item.pic}" alt="">
                        <p>${item.name}</p>
                        <p>城市:${item.city}</p>
                        <p>地址:${item.address}</p>
                        <p>价格:${item.price}</p>
                        <p>演出时间:${item.showTime}</p>
                    </li>
                `
            })
            document.querySelector("ul").innerHTML = str;
        }
        render();
    </script>
</body>
</html>